<template>
	<view>
		<view class="threesome_top">
			<view class="titleBox">
				<image src="../../../static/images/3e6ded40-0f69-442d-a7c9-8f18a472d29f.png.slim.webp"></image>
			</view>
			<view class="recommendBox">
				<view class="recommendBox_title">
					<image src="../../../static/images/threesome_nz.png"></image>
					<text class="tips1">低价团抢购</text>
					<text class="tips2">多人团限时低价推荐商品</text>
					<text class="time">
						<text>17</text>
						:
						<text>32</text>
						:
						<text>35</text>
						后结束
					</text>
				</view>
				<view class="recommendBox_commodity">
					<scroll-view class="scroll1" scroll-x="true" @scroll="scroll">
						<view class="scommodityItem">
							<text class="tips">低价团抢购</text>
							<image class="scommodityImage" src="../../activity/static/images/no_product.png"></image>
							<text class="scommodityName">五得利七星雪晶小麦</text>
							<view class="schedule">
								<text>火爆开抢</text>
							</view>
							<view class="pice">
								<priceFormat class="priceFormat" :price="77.1" weight intSize="38" floatSize="30" labelSize="25"></priceFormat>
							</view>
						</view>
						<view class="scommodityItem">
							<text class="tips">低价团抢购</text>
							<image class="scommodityImage" src="  ../../activity/static/images/no_product.png"></image>
							<text class="scommodityName">五得利七星雪晶小麦</text>
							<view class="schedule">
								<text>火爆开抢</text>
							</view>
							<view class="pice">
								<priceFormat class="priceFormat" :price="77.1" weight intSize="38" floatSize="30" labelSize="25"></priceFormat>
							</view>
						</view>
						<view class="scommodityItem">
							<text class="tips">低价团抢购</text>
							<image class="scommodityImage" src=" ../../activity/static/images/no_product.png"></image>
							<text class="scommodityName">五得利七星雪晶小麦</text>
							<view class="schedule">
								<text>火爆开抢</text>
							</view>
							<view class="pice">
								<priceFormat class="priceFormat" :price="77.1" weight intSize="38" floatSize="30" labelSize="25"></priceFormat>
							</view>
						</view>
						<view class="scommodityItem">
							<text class="tips">低价团抢购</text>
							<image class="scommodityImage" src=" ../../activity/static/images/no_product.png"></image>
							<text class="scommodityName">五得利七星雪晶小麦</text>
							<view class="schedule">
								<text>火爆开抢</text>
							</view>
							<view class="pice">
								<priceFormat class="priceFormat" :price="77.1" weight intSize="38" floatSize="30" labelSize="25"></priceFormat>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="threesome_content">
			<view class="top">
				<view class="box">
					<image src=" ../../../static/images/7aa43690-7cd8-4e33-a9d6-65146d46ed3e.png.slim.webp"></image>
					<text>不成团自动退款</text>
					<text>1万+超低价商品拼着买</text>
				</view>
			</view>
			<view class="classify">
				<scroll-view class="scroll2" scroll-x="true" @scroll="scroll">
					<view 
						class="classifyItem"
						:class="{'classifyCheck': item.type == classifyActive}"
						v-for="(item) in classifyList"
						:key="item.type"
						@click="classifyCheck(item.type)"
					>
						<text>{{item.label}}</text>
						<view></view>
					</view>
				</scroll-view>
			</view>
			<view class="productList">
				<navigator
					hover-class="none"
					:url="'/pages/other/threesome/product_details'"
					class="item"
				>
					<view class="productItem">
						<image class="productImage" src=" ../../activity/static/images/no_product.png"></image>
						<view class="productInfo">
							<view class="label">
								<text class="selfSupport">自营</text>
								<text class="tips">四人成团</text>
							</view>
							<text class="title">
								<text>十月稻香</text>
								24年新玉米十月稻田黄糯玉米220g大棒粘玉米低脂东北黏糯甜真空装
							</text>
							<view class="price">
								<view class="price1">
									<text class="title">成团价</text>
									<priceFormat class="priceFormat" :price="77.1" weight intSize="38" floatSize="30" labelSize="26"></priceFormat>
								</view>
								<text class="tips">三人拼团一人免单</text>
							</view>
						</view>
					</view>
				</navigator>
				
			</view>
		</view>
	</view>
</template>

<script>
	import priceFormat from '@/components/priceFormat'
	export default {
		components: {priceFormat},
		data(){
			return{
				classifyList:[
					{type:1,label:'59元'},
					{type:2,label:'69元'},
					{type:3,label:'79元'},
					{type:4,label:'89元'},
					{type:5,label:'99元'},
					{type:6,label:'109元'},
				],
				classifyActive:1
			}
		},
		methods:{
			classifyCheck(type){
				if(type != this.classifyActive)
				{
					this.classifyActive = type;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face { 
	  font-family: 'zkcjh';
	  src: url('../../../static/fonts/zkcjh.ttf') format('truetype');
	}
	.threesome_top{
		width: 100%;
		height: 600rpx;
		background:linear-gradient(#fd395f,#fd5566);
		background-image: linear-gradient(180deg,#fd395f 14%,#fd5566 82%);
		.titleBox{
			width: 100%;
			height: 45rpx;
			padding: 0px 0px 0px 54rpx;
			margin: 26rpx 0px 26rpx;
			float: left;
			image{
				float: left;
				height: 100%;
			}
		}
		.recommendBox{
			width: 100%;
			height: 423rpx;
			float: left;
			.recommendBox_title{
				width: 100%;
				height: 50rpx;
				margin-bottom: 26rpx;
				padding: 0rpx 25rpx;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-top: 11rpx;
					float: left;
				}
				.tips1,.tips2{
					width: auto;
					height: 20rpx;
					float: left;
					margin-top: 15rpx;
					line-height: 20rpx;
					font-size: 25rpx;
					color: #fff;
					margin-right: 10rpx;
					padding-left: 10rpx;
				}
				.tips2{
					border-left:0.08rem solid #fff;
					opacity: 0.8;
				}
				.time{
					width: auto;
					height: 20rpx;
					float: right;
					margin-top: 15rpx;
					line-height: 20rpx;
					font-size: 25rpx;
					color: #fff;
					text{
						width: auto;
						height: 20rpx;
						line-height: 20rpx;
						font-size: 24rpx;
						padding: 0px 5rpx;
						border-radius: 5rpx;
						background-color: #fff;
						color: #f33a50;
						margin:0px 6rpx;
					}
				}
			}
			.recommendBox_commodity{
				width: 100%;
				height: 347rpx;
				padding: 0rpx 25rpx;
				.scroll1{
					white-space: nowrap;
					width: 100%;
					height: 100%;
					.scommodityItem{
						display: inline-block;
						width: 32%;
						height: 100%;
						border-radius: 15rpx;
						background-color: #fff;
						margin-right: 15rpx;
						.tips{
							width: auto;
							padding: 0px 10rpx;
							height: 35rpx;
							line-height: 35rpx;
							font-size: 25rpx;
							background-color: #fff0d6;
							color: #744f1c;
							font-weight: bold;
							border-radius: 15rpx 0px 15rpx 0px ;
							position: relative;
							float: left;
							z-index: 3;
						}
						.scommodityImage{
							width: calc(100% - 26rpx);
							height: 180rpx;
							margin-top: -22rpx;
							margin-left: 13rpx;
							border-radius: 10rpx;
							float: left;
						}
						.scommodityName{
							width: 100%;
							padding: 0px 13rpx;
							height: 30rpx;
							line-height: 30rpx;
							font-size: 24.5rpx;
							margin-top: 13rpx;
							margin-bottom: 13rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							float: left;
						}
						.schedule{
							width: calc(100% - 26rpx);
							float: left;
							height: 24rpx;
							background: #fed0d9;
							margin-left: 13rpx;
							border-radius: 12rpx;
							text{
								width: 90%;
								height: 100%;
								text-align: left;
								line-height: 24rpx;
								background: #ff4562;
								float: left;
								border-radius:12rpx;
								font-size: 21rpx;
								color: #fff;
								text-indent: 10rpx;
							}
						}
						.pice{
							width: calc(100% - 26rpx);
							height: 50rpx;
							background-color: #8a8a8a;
							float: left;
							margin-left: 13rpx;
							margin-top: 13rpx;
							background: url('../../../static/images/d513e05c-6cfb-435a-8398-b4a9cc4c93da.png.slim.webp');
							background-size: 100% 100%;
							.priceFormat{
								width: 85%;
								float: left;
								height: 50rpx;
								line-height: 50rpx;
								margin-left: 15%;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
	.threesome_content{
		width: 100%;
		height: auto;
		float: left;
		margin-top:-60rpx;
		background-color: #fff;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		.top{
			width: 100%;
			height: 90rpx;
			background:url('../../../static/images/2e7c6dad-622b-4103-bc3b-b2cce78eff13.png.slim.png');
			background-size: 100% 100%;
			border-bottom: 1rpx solid rgba(255,226,182,0.7);
			display: flex;
			justify-content: center;
			align-items: center;
			.box{
				width: auto;
				height: 50rpx;
				image{
					width: 32rpx;
					height: 34rpx;
					float: left;
					margin-top: 8rpx;
				}
				text{
					width: auto;
					height: 20rpx;
					line-height: 20rpx;
					margin-top: 15rpx;
					float: left;
					padding-left: 11rpx;
					margin-right: 11rpx;
					font-size: 28rpx;
					color: #b5650f;
				}
				text:nth-child(3)
				{
					border-left:2rpx solid rgba(159,59,11,0.5);
				}
			}
		}
		.classify{
			width: 100%;
			padding: 0px 26rpx;
			height: 90rpx;
			float: left;
			.scroll2{
				white-space: nowrap;
				width: 100%;
				height: 100%;
				.classifyItem{
					display: inline-block;
					width: auto;
					padding: 0rpx 40rpx;
					height: 100%;
					text{
						float: left;
						width: auto;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 30rpx;
						font-weight: bold;
					}
					view{
						width: 50rpx;
						margin-left: 25%;
						height:9rpx;
						background-color: #fff;
						margin-top:75rpx;
						border-radius: 4rpx;
					}
				}
				.classifyCheck{
					text:nth-child(1){
						font-family: 'zkcjh';
						font-size: 40rpx;
						line-height: 85rpx;
						font-weight: bolder;
						color: #f33a50;
					}
					view{
						background-color: #f33a50;
					}
				}
			}
		}
		.productList{
			width: 100%;
			height: auto;
			float: left;
			padding: 0px 26rpx;
			.item{
				.productItem{
					width: 100%;
					height: 275rpx;
					.productImage{
						width: 250rpx;
						height: 250rpx;
						float: left;
						margin-top: 15rpx;
						border-radius: 10rpx;
					}
					.productInfo{
						width: calc(100% - 265rpx);
						height: 250rpx;
						float: right;
						margin-top: 15rpx;
					}
					.label{
						width: 100%;
						height: 45rpx;
						float: left;
						background-color: #fff;
						.selfSupport{
							width: auto;
							height: 33rpx;
							padding: 0rpx 10rpx;
							border-radius: 6rpx;
							line-height: 33rpx;
							margin-top: 6rpx;
							float: left;
							font-size: 22rpx;
							background-color: rgb(61,49,39);
							color:#f9e9d0;
						}
						.tips{
							width: auto;
							height: 33rpx;
							padding: 0rpx 10rpx;
							border-radius: 6rpx;
							line-height: 33rpx;
							margin-top: 6rpx;
							float: left;
							font-size: 22rpx;
							margin-left: 8rpx;
							background-color: #e02e24;
							color:#f9e9d0;
						}
					}
					.title{
						width: 100%;
						height: 68rpx;
						float: left;
						line-height: 34rpx;
						font-size: 27rpx;
						font-family: PingFangSC-Medium, PingFang SC, miui, system-ui;
						color: rgba(21,21,21,.8);
						margin-top: 3rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						text{
							width: auto;
							height: 22rpx;
							line-height: 22rpx;
							font-size: 27rpx;
							margin-top: 7rpx;
							float: left;
							padding-right:10rpx;
							margin-right: 10rpx;
							border-right: 1rpx solid rgba(21,21,21,.15);
							color:#c58469;
						}
					}
					.price{
						width: 100%;
						height: 80rpx;
						float: left;
						margin-top: 58rpx;
						background:url('../../../static/images/1b677ddc-c462-4880-9275-bbaecfd6fdd8.png.slim.webp');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						.price1{
							width: 100%;
							height: 50rpx;
							float: left;
							.title{
								width: auto;
								color: #f33a50;
								font-size: 23rpx;
								float: left;
								margin-left: 25rpx;
								height: 50rpx;
								line-height: 55rpx;
							}
							.priceFormat{
								width: auto;
								float: left;
								height: 50rpx;
								line-height: 51rpx;
								margin-left: 5rpx;
								color: #f33a50;
							}
						}
						.tips{
							width: auto;
							height: 30rpx;
							line-height: 25rpx;
							font-size: 21rpx;
							float: left;
							margin-left: 25rpx;
							margin-top: -3rpx;
							color: rgba(243,58,80,.4);
						}
						
					}
				}
						
			}
		}
	}
</style>